<span page-title ng-model="product">{{ 'Product information for:' | translate }} {{ product.name }}</span>

<div data-extend-template="layouts/two-column-details.html">
  <div data-block="left-column">
    <h4 translate>Basic Information</h4>

    <dl class="dl-horizontal dl-horizontal-left">
      <dt translate>Name</dt>
      <dd bst-edit-text="product.name"
          on-save="save(product)"
          readonly="product.redhat || denied('edit_products', product)">
      </dd>

      <dt translate>Label</dt>
      <dd>{{ product.label }}</dd>

      <dt translate>GPG Key</dt>
      <dd bst-edit-select="product.gpg_key.name"
          readonly="product.redhat || denied('edit_products', product)"
          selector="product.gpg_key_id"
          options="gpgKeys()"
          on-save="save(product)">
      </dd>

      <dt translate>SSL CA Cert</dt>
      <dd bst-edit-select="product.ssl_ca_cert.name"
          readonly="product.redhat || denied('edit_products', product)"
          selector="product.ssl_ca_cert_id"
          options="certs()"
          on-save="save(product)">
      </dd>

      <dt translate>SSL Client Cert</dt>
      <dd bst-edit-select="product.ssl_client_cert.name"
          readonly="product.redhat || denied('edit_products', product)"
          selector="product.ssl_client_cert_id"
          options="certs()"
          on-save="save(product)">
      </dd>

      <dt translate>SSL Client Key</dt>
      <dd bst-edit-select="product.ssl_client_key.name"
          readonly="product.redhat || denied('edit_products', product)"
          selector="product.ssl_client_key_id"
          options="certs()"
          on-save="save(product)">
      </dd>

      <dt translate>Description</dt>
      <dd bst-edit-textarea="product.description"
          on-save="save(product)"
          readonly="product.redhat || denied('edit_products', product)">
      </dd>

      <dt translate>Number of Repositories</dt>
      <dd>
        <a ui-sref="product.repositories({productId: product.id})">
          {{ product.repository_count }}
        </a>
      </dd>

      <dt translate>Active Tasks</dt>
      <dd>
        <a translate ui-sref="product.tasks.index({productId: product.id})">
          {{ product.active_task_count }}
        </a>
      </dd>
    </dl>
  </div>

  <div data-block="right-column">
    <h4 translate>Sync Status</h4>

    <dl class="dl-horizontal dl-horizontal-left">
      <dt translate>Sync Plan</dt>
      <dd
          bst-edit-select="product.sync_plan.name"
          options="syncPlans()"
          options-format="option.id as option.name for option in options.results"
          selector="product.sync_plan_id"
          on-save="save(product)"
          deletable="product.sync_plan_id != null"
          readonly="denied('edit_products', product)"
          on-delete="product.sync_plan_id = null; save(product)">
      </dd>

      <span ng-include="'products/details/partials/sync-status.html'"></span>

      <dt translate>Last Sync</dt>
      <dd>
        <relative-date date="product.last_sync" />
        (<long-date-time date="product.last_sync" /> <translate>Local Time</translate>)
      </dd>

      <dt translate>Next Sync</dt>
      <dd ng-show="product.sync_plan.next_sync">
        <long-date-time date="product.sync_plan.next_sync" /> (<translate>Server Time</translate>)
      </dd>
      <dd ng-hide="product.sync_plan.next_sync" translate>
        Synced manually, no interval set.
      </dd>

      <dt translate>Sync State</dt>
      <dd>
        <a ng-show="product.sync_status.state" ng-href="/katello/sync_management">{{ product.sync_status.state }}</a>
        <span ng-hide="product.sync_status.state" translate>No sync information available.</span>
      </dd>
    </dl>
  </div>
</div>
